<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" >
      <el-menu-item index="1" @click="getMyCollections">普通收藏</el-menu-item>
      <el-menu-item index="2" @click="getMySpecialCollections">特别收藏</el-menu-item>
    </el-menu>
    <el-empty description="当前为空哦~" v-if="myCollectionList.length < 1">
    </el-empty>
    <el-row type="flex"  justify="center" class="my_article_item" v-for="a in myCollectionList">
      <el-col :span="22" style="border: 1px solid lightgray;height: 180px;margin-top: 20px" class="my_article_body">
        <h3>{{a.title}}</h3>
        <div class="my_article_description">{{a.summary}}</div>
        <div class="my_article_bottom" style="margin-top: 10px">
          <i class="iconfont icon-yanjing" style="color: #5bc65b;">{{a.viewCount}}</i>
          <i class="iconfont icon-shoucang" style="color: #5bc65b;">{{a.collectionCount}}</i>
          <i class="iconfont icon-good" style="color: #5bc65b;">{{a.likeCount}}</i>
          <span class="article_detail" style="display:inline-block;margin-left:80px;color: #5bc65b" @click="showArticleDetail(a.id,a.user.id)">查看></span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #5bc65b;width: 140px;" @click="showOtherInfo(a.user.id)" >作者:{{a.user.nickname}}</span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #5bc65b" @click="cancelCollect(userId,a.id)">取消收藏</span>
          <span class="article_detail" v-if="isSpecial==0" style="display:inline-block;margin-left:10px;color: #5bc65b" @click="changeCollectType(userId,a.id,1)">特别收藏</span>
          <span class="article_detail" v-if="isSpecial==1" style="display:inline-block;margin-left:10px;color: #5bc65b" @click="changeCollectType(userId,a.id,0)">普通收藏</span>
        </div>
      </el-col>
    </el-row>

    <div class="block" style="margin-left: 35%;margin-top: 30px;margin-bottom: 30px">
      <el-pagination
          background
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyCollections",
  data(){
    return {
      activeIndex:'1',
      userId:JSON.parse(sessionStorage.getItem('userInfo')).id,
      myCollectionList:[],
      currentPage:1,
      total:5,
      pageSize:5,
      isSpecial:0
    }
  },
  methods:{
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      if(this.isSpecial == 1){
        this.getMySpecialCollections()
      }else{
        this.getMyCollections()
      }
    },
    changeCollectType(userId,articleId,type){
      let url = 'article/changeCollectionType'
      this.$axios.post(url,null,{
        params:{
          userId:userId,
          articleId:articleId,
          type:type
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.$message.success("成功~")
          this.getMyCollections();
          this.getMySpecialCollections()
        }
      });
    },
    showOtherInfo(uid){
      console.log(uid)
      this.$router.push({
        path:'/otherInfo',
        query:{
          authorId:uid,
        }
      })
    },
    getMyCollections(){
      this.isSpecial = 0;
      let url = 'article/getCollectionArticleListByAuthorId'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          authorId:this.userId,
          type:0
        }

      }).then(res=>{
        if (res.data.code == 200){
          this.myCollectionList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(res)
        }
      })

    },
    getMySpecialCollections(){
      this.isSpecial = 1;
      let url = 'article/getCollectionArticleListByAuthorId'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          authorId:this.userId,
          type:1
        }
      }).then(res=>{
        if (res.data.code == 200){
          this.myCollectionList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(res)
        }
      })
    },
    showArticleDetail(articleId,authorId){
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: articleId,
          authorId: authorId
        }
      });
    },
    cancelCollect(userId,articleId){
      let url = 'article/cancelCollect';
      this.$axios.post(url,null,{
        params:{
          userId:userId,
          articleId:articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.$message.warning('已取消收藏~');
              this.getMyCollections();
            }
          })
    },

  },
  created() {
      this.getMyCollections(this.userId)
  }
}
</script>

<style scoped>
.my_article_body{
  padding: 0 10px;
  border-radius: 4px;
}
.my_article_body h3{
  padding: 8px 20px;
  margin: 0;
  border-bottom: 1px solid lightgray;
}
.my_article_description {
  padding: 8px 20px;
  height: 80px;
  margin: 0;
}
.my_article_bottom {
  padding: 3px 20px;
  border-top: 1px solid lightgray;
  line-height: normal;
}
.my_article_bottom i:not(:first-child) {
  margin-left: 20px;
  width: 40px;
}
.article_detail:hover {
  /*text-underline:#5bc65b;*/
  text-decoration: underline;
  cursor: pointer;
  color: #f1da7f;;
}
</style>